<template>
	<div>
		<top-nav bgColor="white" title="线上下单"  btnName="保存"  :rightShow="true" returnPath="上一级" rightPath="addBills" @fatherDo="saveAdd"></top-nav>
		<section style="height: 3rem;"></section>
		<section style="text-align: left;width: 100%;height: 33rem;padding: 0 1.5rem;position: relative;border-bottom: 1px solid gainsboro;">
			<section class="title">		
				<label class="left-Grant">账户编号：</label>
				<span style="flex: 7;text-align: left;">{{orderData.BillNo}}</span>
			</section>
			<section class="title">
				<label class="left-Grant">客户名称：</label>
				<span style="flex: 7;text-align: left;">{{orderData.CustomName}}</span>
			</section>
			<section class="title">
				<label class="left-Grant">账户余额：</label>
				<span style="flex: 7;text-align: left;">{{orderData.BalAmt}}</span>
			</section>
			<section class="title">
				<label class="left-Grant">物料名称：</label>
				<span style="flex: 7;text-align: left;">{{SalesItem.Name}}</span>
			</section>
			<section  class="title">
				<label class="left-Grant">物料编码：</label>
				<span style="flex: 7;text-align: left;">{{SalesItem.Number}}</span>
			</section>
			<section  class="title">
				<label class="left-Grant">物料单价：</label>
				<span style="flex: 7;text-align: left;">{{orderData.Price}}</span>
			</section>
			<section class="input-add">
				<label class="left-Grant" >订单量：</label>
				<mu-text-field class="right-mu-input" underlineFocusClass="borderClassFocus"    hintText="请输入预装量" v-model="preload"  type="number" fullWidth  v-on:input = "ispreload()" />
			</section>	
			
			<section class="input-add">
				
				<input type="checkbox"  v-model="item.state" v-on:click="alocked(item)"><label class="left-Grant" >重复使用提货码</label>
                               
			</section>	
			<section class="title">
				<label class="left-Grant">开始时间：</label>
				<span style="flex: 7;text-align: left;">	
				 <el-date-picker
      				v-model="startTime"
      				type="datetime"
      				placeholder="选择日期">
    		</el-date-picker></span>
			</section>
			<section class="title">
				<label class="left-Grant">结束时间：</label>
				<span style="flex: 7;text-align: left;">
					<el-date-picker
      				v-model="endTime"
      				type="datetime"
      				placeholder="选择日期">
    			</el-date-picker></span>
			</section>
			
		</section>	

	   	    
	    <section style="height: 3rem; margin-bottom: 3rem;"></section>
		
		<mu-dialog :open="dialog" title="请选择一个物料" @close="close" >
		    <section class="table-title" >
		    	<span>编码</span>
		    	<span>名称</span>
		    </section>
		    <section v-for="(item,index) in SalesItemList"
		    	 @click="getSalesAccountListByItemId(item,index)" 
		    	 class="table-tr" 
		    	 :class="tableIndex==index?'choice-table-tr':''">
		    	<span >{{item.Number}}</span>
		    	<span >{{item.Name}}</span>
		    </section>
	    </mu-dialog>
	    
		
		<mu-dialog :open="dialogAccountFirst" title="请选择一个账户">
	    	<section class="table-title" >
		    	<span>编号</span>
		    	<span>余量</span>
		    </section>
		    <section v-for="(item,index) in accountListFirst"
		    	 @click="moveEleFirst(item,index)"
		    	 class="table-tr" 
		    	 :class="tableIndex==index?'choice-table-tr':''">
		    	<span >{{item.BillNo}}</span>
		    	<span >{{item.Balance}}</span>
		    </section>
	    	
	    	
		    <mu-button slot="actions" @click="closeAccount('cancel')" primary>取消</mu-button>
		</mu-dialog>
		
		
		<mu-dialog :open="isPop" title="提示" @close="closeSave">
		         请确认信息是否准确, 是否保存?
		    <mu-button slot="actions" @click="closeSave('cancel')"  >取消</mu-button>
		    <mu-button slot="actions" primary @click="closeSave('sure')" >确定</mu-button>
		</mu-dialog>
		
		
	</div>
</template>

<script>
	export default{
		data(){
			
			
			
			return{
				guid:[],
				accountListFirst:[],
				dialogAccountFirst:true,//第一次选择账户弹出层
				accountFirstId:null,//选择的账户Id
				organizeid:null,//组织Id
				SalesItemList:[],//物料列表
				dialog:true,//物料弹出层
				dialogAccount:false,//账户弹出层
				orderData:{},//订单信息
				SalesItem:{},//物料信息
				preload:0,//预装量
				//startTime:new Date().toLocaleDateString(),
				//startTime:new Date().toLocaleString(),
				startTime: new Date(this.TimeFormat(new Date())),
				//startTime:'',
				endTime:'',
				isPop:false,//是否提交
				tableIndex:null,//物料顺序
				accountResultList:[],//账户列表
				item:[{state:false},{state:true}]
				
//				FCarNo:'',//车牌号
//				isFcarNo:false,//车牌号验证
//				express:/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/,
//				isCarNomsg:'',
//
//
//				containerNnumber:'',
//				phoneNnumber:'',
//				isphoneNnumber:false,//验手机号证
//				phoneExpress:/^1[3,4,5,7,8]\d{9}$/,
//				isPhonemsg:'',
//				preload:'',
//
//
//				accountList:[],
//				accountResultList:[],
//				choiceIndex:-1,
//				showChoice:{},
//				choiceListJson:{},
//				showList:false,
//
//
//

//				BillTemp:null,

			}
		},
		mounted(){
			this.getAllOrder()
			this.getBillTemp()
     		var Nowdate=new Date()
     		//var ddtf= DateFormat.getDateTimeInstance();
     		//this.startTime= ddtf.format(Nowdate)
     		//this.endTime=new Date(Nowdate.getTime()+24*60*60*1000).toLocaleString()
     		//var M=Number(Nowdate.getMonth())+1;
			//this.endTime=(Nowdate.getFullYear()+1)+"-" + this.fix(M) + "-" + Nowdate.getDate();
			this.endTime = new Date(this.TimeFormat(new Date(Nowdate.getTime()+24*60*60*1000)))
		},
		methods:{
			
			TimeFormat(timestamp){
				let date = new Date(timestamp);
				let Y = date.getFullYear();
				let M = date.getMonth()+1;
				M = (M <10 ? '0' + M : M);
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				let h = (date.getHours() <10 ? '0' + date.getHours() :date.getHours());
				let m = (date.getMinutes()< 10 ? '0' + date.getMinutes() : date.getMinutes());
				let s = (date.getSeconds() < 10 ? '0' +date.getSeconds() : date.getSeconds());
				return Y + '-' + M  + '-' + D + ' '+ h + ':' + m + ':' + s;
			},
			
			alocked:function(item){
            	
            	item.state = !item.state;
            	
            },
			
		    fix(num){
    			if(num<10)
        		return "0"+num;
    			else return ""+num;
			},
			getBillTemp(){//获得guid
				let that=this
				that.axios.post(that.global.hangchangSrc+'/hongchang/getNumber',{
					'factoryId':localStorage.factoryId,
					'uid':localStorage.uid,
					'organizeId':localStorage.organizeId
				}).then(function(response){
					console.info(response.data.data)
					that.guid=response.data.data
				}).catch(function(error){
					
				})
			},
			getAllOrder(){//获得所有订单列表
				let that=this
				that.axios.post(that.global.hangchangSrc+'/hongchang/getAllOrder',{
					'factoryId':localStorage.factoryId,
					'uid':localStorage.uid,
					'currentpage':1
				}).then(function(response){
					console.info(response.data.data)
					that.accountListFirst=response.data.data.list
				}).catch(function(error){
					
				})
			},
			moveEleFirst(data,index){//点击账户列表选择账户列表
				this.accountFirstId=this.accountListFirst[index].ID
				this.orderData=data
				console.info(data)
				this.organizeid=this.accountListFirst[index].OrganizeID
		  		this.dialogAccountFirst=false
				this.dialog=true
		  		this.getSalesItemByAccountID(data.ID)
	  		},
			getSalesItemByAccountID(id){//根据账户Id获得物料列表
	  			let that=this
				that.axios.post(that.global.hangchangSrc+'/hongchang/getSalesItemByAccountID',{
					'factoryId':localStorage.factoryId,
					'uid':localStorage.uid,
					'fid':id,
					'organizeId':that.organizeid 
				}).then(function(response){
					console.info(response.data.data)
					that.SalesItemList=response.data.data.list
				}).catch(function(error){
					
				})
	  		},
			getSalesAccountListByItemId(data,Index){
				this.tableIndex=Index
				this.SalesItem=data
				let that=this
				that.axios.post(that.global.hangchangSrc+'/hongchang/getSalesAccountListByItemIdX05',{
					'factoryId':localStorage.factoryId,
					'uid':localStorage.uid,
					'ItemID':data.ID,
					'organizeId':that.organizeid 
				}).then(function(response){
					console.info(response.data.data)
					that.accountList=response.data.data.list
					that.dialogAccount=false
					that.dialog=false
						for(let j=0;j<that.accountList.length;j++)
						{
							if(that.accountFirstId==that.accountList[j].ID)
							{
								that.orderData=that.accountList[j]
								that.accountResultList.push(that.accountList[j])
								that.accountList.splice(j,1)
							}
						}

				}).catch(function(error){
					console.info(error)
				})
			},
			
			ispreload(){
				let preloadsum=this.preload;
				for(let i=0;i<this.accountResultList.length;i++)
				{
					if(preloadsum>this.accountResultList[i].BalQty){
						this.accountResultList[i].preload=this.accountResultList[i].BalQty
						preloadsum=preloadsum-this.accountResultList[i].BalQty
						console.info(preloadsum)
					}else{
						this.accountResultList[i].preload=preloadsum
				}
				}
			},
			isVehicleNumber(){
			this.isFcarNo=false
			if (this.FCarNo.length == 7){
        	this.isFcarNo = this.express.test(this.FCarNo);
        	this.isCarNomsg='车牌号格式正确'
     		}else{
     			this.isCarNomsg='请输入正确的车牌号'
     		}
     		
		},
		    isPhoneNumber(){
			this.isphoneNnumber=false
			if (this.phoneNnumber.length == 11){
        	this.isphoneNnumber = this.phoneExpress.test(this.phoneNnumber);
        	this.isPhonemsg='手机格式正确'
     		}else{
     			this.isPhonemsg='请输入正确的手机号'
     		}
     		
		},
			close(){
			this.dialog=false
		},
			closeSave(val){
			if(val=='sure'){
				this.addTask()
			}
			this.isPop=false
		},
			closeAccount(val){
//				if(val=='sure'){
//					this.showChoice=this.choiceListJson
//					this.showList=true
//				}else{
//					this.showChoice={}
//				}
				console.info(this.showChoice)
				this.dialogAccount=false
				this.dialog=false
				this.dialogAccountFirst=false
				
				this.$router.go(-1)
				
			},
			choiceList(val,data){
				this.choiceListJson=val
				this.choiceIndex=data
				console.info(val)
			},
			
			
			moveEle(data){
		  		this.accountResultList.push(this.accountList[data])
		  		this.accountList.splice(data,1)
		  		this.dialogAccount=false
				this.dialog=false
		  		console.info(this.accountResultList)
		  		console.info(this.accountList)
	  		},


	  		saveAdd(){
	  			let that=this
//	  			this.$message({type: 'success',message: '保存成功!',duration:1500})
				let preloadsum=this.preload*this.orderData.Price
				if(this.preload==0)
				{
				this.$message({type: 'warning',message: '订单数量不能为零!',duration:1500})	
				}else if(preloadsum>parseFloat(this.BalAmt)){
					this.$message({type: 'warning',message: '账户内余量不足!',duration:1500})
				}else
				{
					this.isPop=true
					console.info(preloadsum)
//					this.$confirm('请确认信息是否准确, 是否保存?', '提示', {
//        			confirmButtonText: '确定',
//        			cancelButtonText: '取消',
//        			center:true,
//        			type: 'warning'
//      			}).then(() => {
//      			that.addTask()
//					
//      			}).catch(() => {
//      				
//					});
				}
	  		},
	  		addTask(){
			let that=this
				that.axios.post('/hongchang/saveBillX05',{
				'factoryId':localStorage.factoryId,
				'uid':localStorage.uid,
				'organizeId':that.organizeid,
				'FOrderID':that.orderData.ID,
				'FOrderNumber':that.orderData.BillNo,
				'FCustomID':that.orderData.CustomID,
				'FCustomName':that.orderData.CustomName,
				'FCustomNumber':that.orderData.CustomNumber,
				'FItemID':that.SalesItem.ID,
				'FItemNumber':that.SalesItem.Number,
				'FItemName':that.SalesItem.Name,
				'FOrderAssID':that.orderData.AssID,
				'FQty':that.preload,
				'FPrice':that.orderData.Price,
				'FStartTime':that.startTime,
				'FEndTime':that.endTime,
				'guid':that.guid[0],
				'FMultiple':that.item.state
				}).then(function(response){
					if(response.data.code==0){
						if(response.data.data.state=="0"){
						console.info(response.data)
						that.$message({type: 'success',message: '保存成功!',duration:1500})
          				//that.$router.replace({path:'hongchangGrantBillsList'})
          				
          				
          		        that.$router.push(
		 		        {path:'hongchangGrantBillsForm',
		 		        name:'hongchangGrantBillsForm',
				        params: { 
	                    ID:response.data.data.ID,
	                    data:response.data
	                    }})
          		       }
				       else {//提示C#端 正常运行 返回错误信息 如用户名或密码错误  剩下C#运行错误由 SIP 数据中心提示
					   //that.$router.go(-1)
					   that.$message({type: 'info',message: '保存失败,原因:'+response.data.data.msg,duration:1500});
				      }
          		        
					}else{
						that.$message({type: 'info',message: '保存失败,原因:'+response.data.msg,duration:1500});
					}
				}).catch(function(error){
					that.$message({type: 'info',message: '保存失败'+error.Message,duration:1500});
				})

		},

		}
	}
</script>

<style scoped>
	.left-Grant{
		flex: nowrap;
	}
	.right-mu-input{
		flex: 9.5;
		margin-top: 0.6rem;
	}
	.input-add{
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		height: 2.8rem;
		flex-direction: row;
	}
	.title{
		border-bottom: 1px solid #e5e5e5;
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		height: 2.8rem;
	}
	
	.choiceBtn{
		position: absolute;
		bottom: 1rem;
		right: 1rem;
		width: 4.6rem;
		background-color: #0090FF;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 1.6rem;
		color: white;
		font-size: 0.7rem;
		border-radius: 3px;
	}
	.choice-list{
		width: 100%;
		height: 100%;
		margin-top: 0.6rem;
	}
	.choice-sec{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: left;
		width: 100%;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		margin-top: 0.6rem;
	}
	.show-sec{
		display: flex;
		flex-direction: column;
		justify-content: left;
		width: 100%;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		margin-top: 0.6rem;
	}
	.show-sec span{
		text-align:left;
		height:2rem;
		text-indent: 0.6rem;
		line-height: 2rem;
	}
	.choice-bg{
		background: #e5e5e5;
	}
	.choice-sec span{
		text-align: left;
		font-size: 0.8rem;
		text-indent: 0.6rem;
		height:2rem;
		line-height: 2rem;
	}
	.show-list{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: left;
		width: 100%;
		/*border: 1px solid #e5e5e5;*/
		margin-top: 1.6rem;
	}
	.show-list span{
		text-align: left;
		font-size: 0.8rem;
		text-indent: 1rem;
		height:2rem;
		line-height: 2rem;
	}
	.show-sec-input{
		height: 2rem;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center; 
		margin-bottom: 0.6rem;
		padding-right: 0.6rem;
	}
	.height-show{
		height: 2rem;
		line-height: 2rem;
	}
	.mu-text-field{
		font-size: 0.8rem!important;
	}
	.table-title{
		color: rgb(0, 144, 255);
		font-size: 0.9rem;
	}
	.table-title,.table-tr{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 2.4rem;
		border-bottom: 1px solid rgba(234,234,234,.8);
		
	}
	.table-tr{
		font-size: 0.8rem;
	}
	.choice-table-tr{
		background-color: rgba(234,234,234,.5);
	}
	.table-title span:nth-child(1),.table-tr span:nth-child(1){
		flex: 1.5;
	}
	.table-title span:nth-child(2),.table-tr span:nth-child(2){
		flex: 1;
	}
	.table-title span:nth-child(3),.table-tr span:nth-child(3){
		flex: 1;
	}
</style>